﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"/>
<title>观澜</title>
<style type="text/css">
*{ padding:0px; margin:0px; }
body{ background:#ffffff; line-height:1.6em;}
a{ color:#C8DCE5; }
h3{ margin: 8px 10px 0 10px; color:#000; font:16pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }			
.boxgrid{ 
width: 320px; 
margin:0px; 
float:left; 
background:#fff; 
border: solid 0px #8399AF; 
overflow: hidden; 
position: relative; }
.boxgrid img{
	position: absolute;
	top: 0;
	left: 0px;
	border: 0;
	height: 213px;
}
.boxgrid p{ 
padding: 0 10px; 
color:#000; 
font-weight:bold;
font:15px "Lucida Grande", Arial, sans-serif; }
.slideleft{ 
height:213px; 
}
.slideright{ 
height:212px; 
}
.thecombo{ 
height:214px; 
}
 			
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #9a9b9b; 
				height: 120px; 
				width: 100%; 
				opacity: .8; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 			}
 				.captionfull .boxcaption {
 					top: 260;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}
				
		</style>
		
<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slideright').toggle(function(){
					$(".cover", this).stop().animate({left:'320px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideleft').toggle(function(){
					$(".cover", this).stop().animate({left:'-320px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.boxgrid.peek').hover(function(){
					$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
				});
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'130px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
				//Caption Sliding (Partially Hidden to Visible)
				$('.boxgrid.caption').click(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
				});
			});
		</script>
</head>

<body>

<div style="width:320px; margin:0 auto;">
           	<div class="boxgrid slideleft">
    
			  <h3>精彩瞬间<br />WONDERFUL MOMENT</h3>
              <p>　　2013年7月27日，法国巴黎，最强雷暴天气袭击巴黎，闪电集中了埃菲尔铁塔，场面十分震撼。</p>
            </div>	
			<div class="boxgrid slideright">
			<h3>精彩瞬间<br />
WONDERFUL MOMENT</h3>	
				<p>　　挪威，游客亲眼目睹美丽的摩纳哥冰川的一部分轰然倒塌，落入海中。英国摄影师Paul Goldstein 在旅行时拍下了这一壮观而震撼的一幕。虽然看起来游客距离冰山很近，但是也有半公里的距离，而观看这一幕的24名游客连续几天仍津津乐道。摄影师称：这是全球变暖的结果，仅仅9年的时间，这个冰川已经后退了一公里。</p>
			</div>	
            <div class="boxgrid thecombo" >
				<h3>精彩瞬间<br />
WONDERFUL MOMENT</h3>	
				<p>　　组合图：当年查尔斯王子与戴安娜王妃抱着刚出生的小威廉王子出院，今年威廉王子和凯特王妃抱着新王室宝宝乔治王子出院。</p>
  </div>			
</div>
</body>
</html>
